
<template>
  <div class="all">
  <div class="body">
    <div class="appovalTab">
      <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="申请人" prop="date" />
    <el-table-column label="发起时间" prop="name" />
    <el-table-column label="第一审批人" prop="name" />
    <el-table-column label="处理结果" prop="name" />
    <el-table-column label="第二审批人" prop="name" />
    <el-table-column label="处理结果" prop="name" />
    <el-table-column label="最终结果" prop="name" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
    </div>
    <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="100"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
    <div><el-button type="primary" style="margin-left: 16px" @click="drawer = true">详情</el-button>

  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <div class="Approver">
    <el-timeline>
      <el-timeline-item center timestamp="2018/4/12" placement="top">
        <div>
          <span style="font-size: 12px; font-weight:bold;">发起审批</span>
        </div>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/3" placement="top">
        <el-card>
          <div>
            <div><svg t="1677057189864" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="42692" width="400" height="400"><path d="M743.7 128.9C676 87.7 596.4 64 511.4 64 264.2 64 63.8 264.4 63.8 511.6c0 138.1 62.5 261.5 160.8 343.6v-0.2c77.8 65.2 178 104.5 287.5 104.5 247.2 0 447.6-200.4 447.6-447.6-0.1-162.4-86.6-304.6-216-383zM662 867.3c-47.5 20.1-98 30.3-150.1 30.3s-102.6-10.2-150.1-30.3c-45.9-19.4-87.2-47.2-122.6-82.7-4.8-4.8-9.5-9.8-14.1-14.9 3.7-128.6 209.7-141 210.7-195.7 0.3-2.9 0.4-33-10-49.5-10.9-17.5-48-72.9-48-124.7 0-79.5 54.8-143.9 134.3-143.9s134.3 64.4 134.3 143.9c0 51.8-39.7 111-48 124.7-8.8 14.6-9.7 45.7-10 49.5-1 56.7 206.5 76.4 210.7 195.1-4.7 5.3-9.6 10.4-14.6 15.5-35.3 35.4-76.6 63.3-122.5 82.7z" p-id="42693" fill="#87a7d6"></path></svg></div>
            <div><span>审批人：</span>
            <div><svg t="1677060157704" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="50783" width="400" height="400"><path d="M112 112m128 0l544 0q128 0 128 128l0 544q0 128-128 128l-544 0q-128 0-128-128l0-544q0-128 128-128Z" fill="#FFFFFF" p-id="50784"></path><path d="M160 160m112 0l512 0q112 0 112 112l0 512q0 112-112 112l-512 0q-112 0-112-112l0-512q0-112 112-112Z" fill="#A0F090" p-id="50785"></path><path d="M784 928H240c-79.4 0-144-64.6-144-144V240c0-79.4 64.6-144 144-144h544c79.4 0 144 64.6 144 144v544c0 79.4-64.6 144-144 144zM240 128a112.12 112.12 0 0 0-112 112v544a112.12 112.12 0 0 0 112 112h544a112.12 112.12 0 0 0 112-112V240a112.12 112.12 0 0 0-112-112z" fill="#333333" p-id="50786"></path><path d="M224 560l224 192s160-272 336-416l-32-48S560 400 416 592c-16-16-99.65-78.36-96-80z" fill="#FFFFFF" p-id="50787"></path><path d="M308.42 610.38L448 736s144-256 320-400l-11.73 0.73a16.31 16.31 0 0 0-7.95 2.66c-24.67 16.3-169.16 115.68-296.56 288.93a32 32 0 0 1-46.25 5.61l-51.75-43.13a41.51 41.51 0 0 0-39.69-7.49 16 16 0 0 0-5.65 27.07z" fill="#82DAFA" p-id="50788"></path><path d="M448 768a16 16 0 0 1-10.41-3.85l-224-192a16 16 0 0 1 3.25-26.46l96-48 0.61-0.29a16 16 0 0 1 20.5 6.76c6 5.63 26.51 21.91 41.84 34.05 14.12 11.19 27.75 22 37.91 30.44 73-94 156.24-167.39 214.4-213.22 66.11-52.09 113.84-80.08 115.84-81.25a16 16 0 0 1 21.37 4.94l32 48a16 16 0 0 1-3.18 21.26c-89.5 73.23-175 181.11-231 258.71-60.9 84.45-101 152.35-101.38 153a16 16 0 0 1-11.16 7.67 15.65 15.65 0 0 1-2.59 0.24zM252.71 563.53L444.1 727.58c15.66-25.42 48.95-78 92.92-138.94 54.82-76 137.58-180.68 225.7-255.72l-15.47-23.2A1210.83 1210.83 0 0 0 647.41 381C588.08 427.74 502 504 428.8 601.6a16 16 0 0 1-24.11 1.71c-6.73-6.73-29.07-24.41-48.77-40-12.08-9.57-23.49-18.61-32.18-25.77q-4.14-3.4-7.1-6z" fill="#333333" p-id="50789"></path></svg>
      </div>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
      <el-timeline-item center timestamp="2018/4/2" placement="top">
        <el-card>
          <div><svg t="1677057189864" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="42692" width="400" height="400"><path d="M743.7 128.9C676 87.7 596.4 64 511.4 64 264.2 64 63.8 264.4 63.8 511.6c0 138.1 62.5 261.5 160.8 343.6v-0.2c77.8 65.2 178 104.5 287.5 104.5 247.2 0 447.6-200.4 447.6-447.6-0.1-162.4-86.6-304.6-216-383zM662 867.3c-47.5 20.1-98 30.3-150.1 30.3s-102.6-10.2-150.1-30.3c-45.9-19.4-87.2-47.2-122.6-82.7-4.8-4.8-9.5-9.8-14.1-14.9 3.7-128.6 209.7-141 210.7-195.7 0.3-2.9 0.4-33-10-49.5-10.9-17.5-48-72.9-48-124.7 0-79.5 54.8-143.9 134.3-143.9s134.3 64.4 134.3 143.9c0 51.8-39.7 111-48 124.7-8.8 14.6-9.7 45.7-10 49.5-1 56.7 206.5 76.4 210.7 195.1-4.7 5.3-9.6 10.4-14.6 15.5-35.3 35.4-76.6 63.3-122.5 82.7z" p-id="42693" fill="#87a7d6"></path></svg></div>
            <div><span>审批人：</span>
            <div><svg t="1677060138059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="50608" width="400" height="400"><path d="M112 112m128 0l544 0q128 0 128 128l0 544q0 128-128 128l-544 0q-128 0-128-128l0-544q0-128 128-128Z" fill="#FFFFFF" p-id="50609"></path><path d="M160 160m112 0l512 0q112 0 112 112l0 512q0 112-112 112l-512 0q-112 0-112-112l0-512q0-112 112-112Z" fill="#FF8591" p-id="50610"></path><path d="M784 928H240c-79.4 0-144-64.6-144-144V240c0-79.4 64.6-144 144-144h544c79.4 0 144 64.6 144 144v544c0 79.4-64.6 144-144 144zM240 128a112.12 112.12 0 0 0-112 112v544a112.12 112.12 0 0 0 112 112h544a112.12 112.12 0 0 0 112-112V240a112.12 112.12 0 0 0-112-112z" fill="#333333" p-id="50611"></path><path d="M272 352l128-47s240 143 336 447h-48S528 464 272 352z" fill="#FFFFFF" p-id="50612"></path><path d="M337 369l33.14-8.94a63.93 63.93 0 0 1 56.12 11.39C483.18 416.1 620.81 537.62 720 736h-48S496 464 337 369z" fill="#FFE07A" p-id="50613"></path><path d="M736 768h-48a16 16 0 0 1-14-8.23c-0.39-0.71-40.38-72.11-110.72-156-64.51-77-168.52-180.57-297.7-237.08a16 16 0 0 1 0.89-29.68l128-47a16 16 0 0 1 13.71 1.27c2.52 1.51 62.63 37.68 135.26 112.07a896.06 896.06 0 0 1 113 142 847.2 847.2 0 0 1 94.79 201.91A16 16 0 0 1 736 768z m-38.76-32h16.61c-49.5-142.81-131.26-246.62-192.52-309.53-56.61-58.13-106.18-92.58-123.23-103.73l-84.86 31.16c48 24.67 95.66 56.71 142 95.59 45.84 38.42 90.58 83.59 133 134.24 58.93 70.35 96.34 130.81 109 152.27z" fill="#333333" p-id="50614"></path><path d="M785 352l-128-47S417 448 321 752h48s160-288 416-400z" fill="#FFFFFF" p-id="50615"></path><path d="M720 369l-33.14-8.94a63.93 63.93 0 0 0-56.12 11.39C573.82 416.1 436.19 537.62 337 736h48s176-272 335-367z" fill="#FFE07A" p-id="50616"></path><path d="M321 768h48a16 16 0 0 0 14-8.23c0.39-0.71 40.38-72.11 110.72-156 64.51-77 168.52-180.57 297.7-237.08a16 16 0 0 0-0.89-29.68l-128-47a16 16 0 0 0-13.71 1.27c-2.52 1.51-62.63 37.68-135.26 112.07a896.06 896.06 0 0 0-113 142 847.2 847.2 0 0 0-94.79 201.91A16 16 0 0 0 321 768z m38.76-32h-16.61c49.5-142.81 131.26-246.62 192.52-309.53 56.61-58.13 106.18-92.58 123.23-103.73l84.86 31.16c-48 24.67-95.66 56.71-142 95.59-45.84 38.42-90.58 83.59-133 134.24-58.93 70.35-96.34 130.81-109 152.27z" fill="#333333" p-id="50617"></path></svg></div>
            </div>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/2" placement="top">
        <svg t="1677060157704" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="50783" width="400" height="400"><path d="M112 112m128 0l544 0q128 0 128 128l0 544q0 128-128 128l-544 0q-128 0-128-128l0-544q0-128 128-128Z" fill="#FFFFFF" p-id="50784"></path><path d="M160 160m112 0l512 0q112 0 112 112l0 512q0 112-112 112l-512 0q-112 0-112-112l0-512q0-112 112-112Z" fill="#A0F090" p-id="50785"></path><path d="M784 928H240c-79.4 0-144-64.6-144-144V240c0-79.4 64.6-144 144-144h544c79.4 0 144 64.6 144 144v544c0 79.4-64.6 144-144 144zM240 128a112.12 112.12 0 0 0-112 112v544a112.12 112.12 0 0 0 112 112h544a112.12 112.12 0 0 0 112-112V240a112.12 112.12 0 0 0-112-112z" fill="#333333" p-id="50786"></path><path d="M224 560l224 192s160-272 336-416l-32-48S560 400 416 592c-16-16-99.65-78.36-96-80z" fill="#FFFFFF" p-id="50787"></path><path d="M308.42 610.38L448 736s144-256 320-400l-11.73 0.73a16.31 16.31 0 0 0-7.95 2.66c-24.67 16.3-169.16 115.68-296.56 288.93a32 32 0 0 1-46.25 5.61l-51.75-43.13a41.51 41.51 0 0 0-39.69-7.49 16 16 0 0 0-5.65 27.07z" fill="#82DAFA" p-id="50788"></path><path d="M448 768a16 16 0 0 1-10.41-3.85l-224-192a16 16 0 0 1 3.25-26.46l96-48 0.61-0.29a16 16 0 0 1 20.5 6.76c6 5.63 26.51 21.91 41.84 34.05 14.12 11.19 27.75 22 37.91 30.44 73-94 156.24-167.39 214.4-213.22 66.11-52.09 113.84-80.08 115.84-81.25a16 16 0 0 1 21.37 4.94l32 48a16 16 0 0 1-3.18 21.26c-89.5 73.23-175 181.11-231 258.71-60.9 84.45-101 152.35-101.38 153a16 16 0 0 1-11.16 7.67 15.65 15.65 0 0 1-2.59 0.24zM252.71 563.53L444.1 727.58c15.66-25.42 48.95-78 92.92-138.94 54.82-76 137.58-180.68 225.7-255.72l-15.47-23.2A1210.83 1210.83 0 0 0 647.41 381C588.08 427.74 502 504 428.8 601.6a16 16 0 0 1-24.11 1.71c-6.73-6.73-29.07-24.41-48.77-40-12.08-9.57-23.49-18.61-32.18-25.77q-4.14-3.4-7.1-6z" fill="#333333" p-id="50789"></path></svg>
      </el-timeline-item>
      <div class="">
        
      </div>
      
    </el-timeline>
    </div>
  </el-drawer>
</div>
</div>
</div>
  </template>
  
  
<script>
  export default {
    data(){
      return{
        drawer:false,
    }
}
}  
</script>
  
<style>
.Approver{
    height: 800px;
    width: 450px;
    border: 1px soild;
}
.appovalTab{
  height: 800px;
  width: 100%;
  border: 1px solid #ddd;
}
.body{
  /* height: 800px; */
  width: 1600px;
  border: 1px solid #ddd;
  margin: 25px 30px 25px;
  border-radius: 3px;
}
.all{
  width: 100%;
  height: 100%;
  background: #f7f7f9;
}
.demo-pagination-block{
  margin-left: 550px;
  margin-top: 20px;
}
</style>